<!DOCTYPE html>
<html lang="en">
<head>
    <title>模板语法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 容器1 -->
    <div id = "demo1">
        <h1>插值语法</h1>
        <h3>你好，{{url}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="url" v-bind:x="hello">点击去百度</a>
        <hr/>
        <h1>简写v-bind: --->:</h1>
        <a :href="url" :x="hello">点击去百度</a>
        <h2 :y="Date.now()" :z="name">表达式的内容</h2>
        <h2 :y="newdata.time" :z="name">欢迎收看{{newdata.new}},{{newdata.url}}</h2>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#demo1",
            data:{
                name:"jack", 
                url:"http://www.baidu.com",
                hello:"你好",
                newdata:{
                    new:"新闻联播",
                    url:"www.news.com"
                }
            }
        })
    </script>
    <!-- 总结：Vue模板语法2大类：
        1.插值语法：用于解析标签体内容
        写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的属性
        2.指令语法：用于解析标签（包括：标签属性、标签体内容、绑定时间。。。）
        如：v-bind:href="xxx" 或简写为:href="xxx",xxx同样是js表达式
        备注：Vue中还有很多的指令，且形式都是：v-???,此处只是详介绍v-bind
    -->
    
</body>
</html>